<template>
	<view>
		<!-- <u-datetime-picker :show="timeShow" @close="timeShow = false" @confirm="timeChange" @cancel="timeShow = false"
			closeOnClickOverlay v-model="value1" mode="datetime"></u-datetime-picker> -->
		<u-calendar
			:show="timeShow"
			color="#FFC100"
			showLunar
			closeOnClickOverlay
			@close="timeShow = false"
			@confirm="timeConfirm"
		></u-calendar>
		<z-paging
			ref="paging"
			v-model="dataList"
			@query="queryList"
			:refresher-enabled="false"
			safe-area-inset-bottom
		>
			<view slot="top">
				<u-navbar
					:title="type === 'get' ? $t('state.navText') : $t('state.setText')"
					placeholder
					:autoBack="true"
				/>
				<scroll-view scroll-x class="top">
					<view style="display: flex;align-items: center;">
						<view style="flex-shrink: 0;margin-left: 20rpx;">
							<!-- 					<u-radio-group v-model="state" placement="row" @change="groupChange">
								<u-radio
									activeColor="#ffcb2e"
									shape="square"
									:label="$t('state.radio_all')"
									:customStyle="{ marginRight: '10px' }"
									name="2"
								/>
								<u-radio
									activeColor="#ffcb2e"
									shape="square"
									:customStyle="{ marginRight: '10px' }"
									:label="$t('state.radio_yes')"
									name="1"
								/>
								<u-radio
									activeColor="#ffcb2e"
									shape="square"
									:label="$t('state.radio_no')"
									name="0"
								/>
							</u-radio-group> -->

							<u-checkbox-group
								v-model="state"
								placement="row"
								@change="groupChange"
								v-if="type == 'get'"
							>
								<u-checkbox
									activeColor="#ffcb2e"
									shape="square"
									:customStyle="{ marginRight: '10px' }"
									:label="$t('state.radio_yes')"
									name="1"
								></u-checkbox>
								<u-checkbox
									activeColor="#ffcb2e"
									shape="square"
									:label="$t('state.radio_no')"
									name="0"
								></u-checkbox>
							</u-checkbox-group>
						</view>
						<view class="status_box" @click="popupShow = true" v-if="type == 'get'">
							<!-- $t('state.time') -->
							<u-icon
								name="arrow-down-fill"
								:label="time ? time + '  ' + times : '时间'"
								labelPos="left"
								color="#595959"
								labelColor="#595959"
								size="11"
							/>
						</view>
						<picker mode="selector" :range="numList" @change="numChange" v-if="type == 'get'">
							<view class="status_box">
								<!-- $t('state.people') -->
								<u-icon
									name="arrow-down-fill"
									:label="num ? num : '人数'"
									labelPos="left"
									color="#595959"
									labelColor="#595959"
									size="11"
								/>
							</view>
						</picker>
						<picker mode="selector" :range="boxList" @change="boxChange">
							<view class="status_box" style="margin-right: 20rpx;">
								<!-- $t('state.room') -->
								<u-icon
									name="arrow-down-fill"
									:label="is_box"
									labelPos="left"
									color="#595959"
									labelColor="#595959"
									size="11"
								/>
							</view>
						</picker>
					</view>
				</scroll-view>
			</view>
			<view class="content">
				<view class="grid_item" v-for="(item, index) in dataList" :key="index">
					<view v-if="is_box == '包厢'">
						<view class="item_title">
							<view class="status_1" v-if="item.state == 0">可预订</view>
							<!-- <view class="status_0" v-if="item.state!=0">{{item.reserve.reserve_people}}</view> -->
							<view class="status_0" v-if="item.state != 0">
								{{ getState(item.reserve.reserve_state) }}
							</view>
							<!-- 							<u-icon
								name="more-dot-fill"
								color="#c4c4c4"
								v-if="type === 'set'"
								@click="editItem(item)"
								size="20"
								bold
							></u-icon> -->
						</view>

						<view class="item_content">
							<view class="item_name">
								<view class="name_left">{{ item.box_num + '人桌' }}</view>
								<view class="name_right">可容纳{{ item.box_max }}人</view>
							</view>
							<image src="/static/image/merchant_8.png" class="item_box"></image>
							<image
								src="/static/image/status_1.png"
								class="status_image"
								v-if="item.reserve.reserve_state == '1'"
							></image>
							<image
								src="/static/image/status_2.png"
								class="status_image"
								v-if="item.reserve.reserve_state == '2'"
							></image>
							<image
								src="/static/image/status_3.png"
								class="status_image"
								v-if="item.reserve.reserve_state == '3'"
							></image>
							<image
								src="/static/image/status_6.png"
								class="status_image"
								v-if="item.reserve.reserve_state == '6'"
							></image>
							<view class="item_text">
								<u--text
									align="center"
									:text="
										language == 'zh'
											? item.box_name
											: item.box_name_copy
											? item.box_name_copy
											: item.box_name
									"
									color="rgba(214, 152, 51, 1)"
									size="14"
									lines="1"
									bold
								/>
							</view>
							<!-- 等于get的时候显示 -->
							<view style="display: flex;">
								<u-button
									text="预订信息"
									shape="circle"
									v-if="item.state == 0 && type == 'get'"
									:customStyle="btnStyle1"
								></u-button>
								<u-button
									text="立即预订"
									shape="circle"
									@click="goReserve(item)"
									v-if="item.state == 0 && type == 'get'"
									:customStyle="btnStyle1"
								></u-button>
							</view>
							<!-- 等于set的时候显示 -->
							<view style="display: flex;">
								<u-button
									text="编辑"
									shape="circle"
									v-if="type == 'set'"
									:customStyle="btnStyle1"
									@click="editItem(item)"
								></u-button>
								<u-button
									text="删除"
									shape="circle"
									v-if="type == 'set'"
									:customStyle="btnStyle1"
									@click="delItem(item)"
								></u-button>
							</view>

							<u-button
								text="点菜"
								v-if="item.reserve.reserve_state == '2' && type == 'get'"
								shape="circle"
								:customStyle="btn3Style"
								@click="orderDishes(item)"
							/>
							<view class="between" v-if="item.reserve.reserve_state == '1' && type == 'get'">
								<u-button
									text="确认"
									shape="circle"
									:customStyle="btn1Style"
									@click="orderAffirm(item)"
								/>
								<u-button
									text="取消"
									shape="circle"
									:customStyle="btn2Style"
									@click="getCancel(item)"
								/>
							</view>
							<u-button
								text="去结算"
								shape="circle"
								@click="goAccount(item)"
								v-if="item.reserve.reserve_state == '3' && type == 'get'"
								:customStyle="btnStyle"
							></u-button>
						</view>
					</view>
					<view v-if="is_box == '大厅'">
						<view class="item_title">
							<view class="status_1" v-if="item.state == 0">可预订</view>
							<view class="status_0" v-if="item.state != 0">
								{{ getState(item.reserve.reserve_state) }}
							</view>
							<!-- 						<u-icon
								name="more-dot-fill"
								color="#c4c4c4"
								@click="editItem(item)"
								size="20"
								bold
								v-if="type === 'set'"
							/> -->
						</view>

						<view class="item_content">
							<image src="/static/image/merchant_10.png" class="item_lobby"></image>
							<image
								src="/static/image/status_1.png"
								class="status1_image"
								v-if="item.reserve.reserve_state == '1'"
							></image>
							<image
								src="/static/image/status_2.png"
								class="status1_image"
								v-if="item.reserve.reserve_state == '2'"
							></image>
							<image
								src="/static/image/status_3.png"
								class="status1_image"
								v-if="item.reserve.reserve_state == '3'"
							></image>
							<image
								src="/static/image/status_6.png"
								class="status1_image"
								v-if="item.reserve.reserve_state == '6'"
							></image>
							<view class="item_name">
								<view class="name_left">{{ item.table_num + '号' }}桌</view>
								<view class="name_right">(可容纳{{ item.box_max }}人)</view>
							</view>
							<!-- 等于get显示 -->
							<view style="display: flex;">
								<u-button
									text="预订信息"
									shape="circle"
									v-if="item.state == 0 && type == 'get'"
									:customStyle="btnStyle1"
								></u-button>
								<u-button
									text="立即预订"
									shape="circle"
									@click="goReserve(item)"
									v-if="item.state == 0 && type == 'get'"
									:customStyle="btnStyle1"
								></u-button>
							</view>

							<!-- 等于set的时候显示 -->
							<view style="display: flex;">
								<u-button
									text="编辑"
									shape="circle"
									v-if="type == 'set'"
									:customStyle="btnStyle1"
									@click="editItem(item)"
								></u-button>
								<u-button
									text="删除"
									shape="circle"
									v-if="type == 'set'"
									:customStyle="btnStyle1"
									@click="delItem(item)"
								></u-button>
							</view>
							<u-button
								text="点菜"
								v-if="item.reserve.reserve_state == '2' && type == 'get'"
								shape="circle"
								:customStyle="btn3Style"
								@click="orderDishes(item)"
							/>
							<view class="between" v-if="item.reserve.reserve_state == '1' && type == 'get'">
								<u-button
									text="确认"
									shape="circle"
									:customStyle="btn1Style"
									@click="orderAffirm(item)"
								/>
								<u-button
									text="取消"
									shape="circle"
									:customStyle="btn2Style"
									@click="getCancel(item)"
								/>
							</view>
							<u-button
								text="去结算"
								shape="circle"
								@click="goAccount(item)"
								v-if="item.reserve.reserve_state == '3' && type == 'get'"
								:customStyle="btnStyle"
							></u-button>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<!-- 		<u-action-sheet
			:actions="editList"
			@close="show = false"
			:show="show"
			cancelText="取消"
			safeAreaInsetBottom
			:round="10"
			closeOnClickOverlay
			@select="getSelect"
		></u-action-sheet> -->
		<u-popup :show="popupShow" @close="popupShow = false" mode="bottom" :round="10">
			<view class="popup">
				<u--text text="日期" align="center" bold color="#000" margin="0px 0px 10px 0px"></u--text>
				<view class="date">
					<view class="num_item" @click="setTime">{{ time ? time : '选择日期' }}</view>
				</view>
				<u--text text="时间" align="center" bold color="#000" margin="10px 0px"></u--text>
				<scroll-view scroll-x>
					<view class="grid_3">
						<view
							class="grid3_item"
							@click="setName(item)"
							:class="[timeName == item.name ? 'grid_active' : '']"
							v-for="(item, index) in quantumList"
							:key="index"
						>
							<view class="grid_name">{{ item.name }}</view>
							<view class="grid_label">{{ item.label }}</view>
						</view>
					</view>
				</scroll-view>
				<scroll-view scroll-x v-if="timeName" class="m-top-20">
					<view class="dateBox">
						<view
							v-for="(item, index) in timeList"
							class="num_item"
							@click="times = item.label"
							:class="[item.disabled ? 'disabled' : '', times == item.label ? 'num_active' : '']"
						>
							{{ item.label }}
						</view>
					</view>
				</scroll-view>
				<view class="btn">
					<u-button
						text="确定"
						shape="circle"
						:customStyle="btn4Style"
						@click="getPopup"
					></u-button>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			state: [],
			type: '',
			btnStyle: {
				background: 'linear-gradient(90deg, rgba(255, 203, 46, 1) 0%, rgba(255, 157, 46, 1) 100%)',
				width: '100px',
				height: '35px',
				color: '#fff',
				border: 'none',
				margin: '0px auto'
			},
			btnStyle1: {
				background: 'linear-gradient(90deg, rgba(255, 203, 46, 1) 0%, rgba(255, 157, 46, 1) 100%)',
				width: '70px',
				height: '25px',
				color: '#fff',
				transform: 'scale(0.9)',
				fontSize: '24rpx',
				border: 'none',
				margin: '0px auto'
			},
			btn2Style: {
				background: 'linear-gradient(90deg, rgba(255, 203, 46, 1) 0%, rgba(255, 157, 46, 1) 100%)',
				width: '65px',
				height: '35px',
				color: '#fff',
				border: 'none',
				margin: '0px'
			},
			btn1Style: {
				background:
					'linear-gradient(90deg, rgba(255, 108, 3, 1) 0%, rgba(255, 109, 5, 1) 5.5%, rgba(255, 132, 31, 1) 100%)',
				width: '65px',
				height: '35px',
				color: '#fff',
				border: 'none',
				margin: '0px'
			},
			btn3Style: {
				background:
					'linear-gradient(90deg, rgba(255, 108, 3, 1) 0%, rgba(255, 109, 5, 1) 5.5%, rgba(255, 132, 31, 1) 100%)',
				width: '100px',
				height: '35px',
				color: '#fff',
				border: 'none',
				margin: '0px auto'
			},
			btn4Style: {
				background:
					'linear-gradient(90deg, rgba(255, 108, 3, 1) 0%, rgba(255, 109, 5, 1) 5.5%, rgba(255, 132, 31, 1) 100%)',
				// width: "100px",
				// height: "35px",
				color: '#fff',
				border: 'none',
				margin: '0px auto'
			},
			dataList: [],
			editList: [
				{
					name: '编辑'
				},
				{
					name: '删除'
				}
				// {
				// 	name: '状态修改'
				// }
			],
			boxList: [],
			numList: [], //人数
			show: false,
			popupShow: false,
			time: '', //日期
			times: '', //时间
			num: '', //人数
			is_box: '包厢',
			type: '',
			timeName: '',
			timeShow: false,
			item: {},
			quantumList: [
				{
					label: '7:00-9:00',
					start: 7,
					end: 10,
					name: '早餐'
				},
				{
					label: '11:00-15:00',
					start: 11,
					end: 16,
					name: '午餐'
				},
				{
					label: '17:00-21:00',
					start: 17,
					end: 22,
					name: '晚餐'
				}
			],
			startHour: 0,
			endHour: 0,
			timeDate: [],
			timeList: [],
			step: 30 //间隔时间(分钟)
		};
	},
	computed: {
		...mapGetters(['merchant']),
		language() {
			return this._i18n.locale;
		}
	},
	onLoad(event) {
		this.type = event.type;
		console.log(event, 'event');
		console.log(this.type);
		// event.state ? (this.state = event.state) : '';
		uni.$on('updateList', () => {
			this.groupChange();
		});
		this.getPer();
	},
	methods: {
		getPopup() {
			this.popupShow = false;
			this.$refs.paging.reload();
		},
		setName(item) {
			this.timeName = item.name;
			this.startHour = item.start;
			this.endHour = item.end;
			this.times = '';
			this.getHours();
		},
		forMatNumber(n) {
			return n < 10 ? '0' + n : n;
		},
		getHours() {
			let _this = this;
			let aDate = new Date();
			let curHour = aDate.getHours();
			_this.timeDate = [];
			for (let j = _this.startHour * 1; j < _this.endHour * 1; j++) {
				for (let k = 0; k < 60; k += _this.step) {
					_this.timeDate.push(_this.forMatNumber(j) + ':' + _this.forMatNumber(k));
				}
			}
			_this.timeDate.splice(_this.timeDate.length - 1, 1);
			this.initHours(true);
		},
		initHours(flag) {
			let _this = this;
			let aDate = new Date();
			let curHour = aDate.getHours();
			_this.timeList = [];
			let dateTime = this.getPresent();
			dateTime = new Date(dateTime.replace(/-/g, '/'));
			var presenTime = dateTime.getTime();
			if (flag) {
				for (var i = 0; i < _this.timeDate.length; i++) {
					var timeVal = {};
					timeVal.label = _this.timeDate[i];
					timeVal.disabled = false;
					timeVal.show = false;
					_this.timeList.push(timeVal);
				}
			} else {
				_this.result =
					_this.dayList[0].year + '-' + _this.dayList[0].month + '-' + _this.dayList[0].day;
				for (var i = 0; i < _this.timeDate.length; i++) {
					var timeVal = {};
					var timestamp = new Date(
						(_this.result + ' ' + _this.timeDate[i]).replace(/-/g, '/')
					).getTime();
					timeVal.label = _this.timeDate[i];
					timeVal.disabled = timestamp < presenTime ? true : false;
					timeVal.show = false;
					_this.timeList.push(timeVal);
				}
			}
		},
		getPresent() {
			var date = new Date();
			var y = date.getFullYear();
			var m = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
			var d = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
			var f = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			var formatdate = y + '-' + m + '-' + d + ' ' + h + ':' + f;
			return formatdate;
		},
		setTime() {
			this.popupShow = false;
			this.timeShow = true;
		},
		timeConfirm(event) {
			this.timeShow = false;
			this.popupShow = true;

			this.time = event[0];
		},
		getState(state) {
			switch (state) {
				case '1':
					return '待到店';
					break;
				case '2':
					return '待点餐';
					break;
				case '3':
					return '待结算';
					break;
				case '6':
					return '已完成';
					break;
			}
		},
		//去结算
		goAccount(item) {
		console.log(item);
			uni.$u.route({
				url: 'pagesA/my/account',
				params: {
					order_id: item.order_id,
					order_type: 'goods',
					type: 'wechat',
					access_token: item.access_token,
					method: 'scan',
					code: uni.getStorageSync('code')
				}
			});
		},
		//点菜
		orderDishes(item) {
			console.log(item);
			uni.$u.route({
				type: 'redirect',
				url: 'pagesA/my/orderDishes',
				params: {
					shop_id: this.merchant.id,
					reserve_id: item.reserve.id,
					table_num: item.reserve.num
				}
			});
		},
		//取消预约
		getCancel(item) {
			uni.showLoading({
				title: '取消中...',
				mask: true
			});
			this.$http
				.post('wanlshop/reserve/cancelReserveShop', {
					id: item.reserve.id
				})
				.then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						this.state = [];
						this.groupChange([]);

						setTimeout(() => {
							this.$refs.uToast.show({
								type: 'default',
								duration: 1000,
								message: '取消成功'
							});
						}, 150);
					}
				});
		},
		// 去预约
		goReserve(item) {
			uni.$u.route({
				url: 'pagesA/my/reserve',
				params: {
					shop_id: item.shop_id,
					id: item.id,
					table_num: item.table_num,
					type: 'yuyue'
				}
				// params: {
				// 	item: JSON.stringify(item)
				// }
			});
		},
		// 删除包厢

		delItem(item) {
			var that = this;
			uni.showModal({
				title: '重要提示',
				content: '您确认要删除吗',
				success(res) {
					if (res.confirm) {
						uni.showLoading({
							title: '删除中...',
							mask: true
						});
						that.$http
							.get('wanlshop/shop/delRoom', {
								id: item.id
							})
							.then(res => {
								uni.hideLoading();
								if (res.code == 1) {
									that.$refs.paging.reload();
									setTimeout(() => {
										that.$refs.uToast.show({
											type: 'default',
											message: '删除成功',
											duration: 1000
										});
									}, 150);
								}
							});
					} else if (res.cancel) {
						return false;
					}
				}
			});
		},
		//编辑包厢
		editItem(item) {
			uni.$u.route({
				url: 'pagesA/my/addBox',
				params: {
					type: 'edit',
					id: item.id
				}
			});
		},
		//包厢设置
		// getSelect(event) {
		// 	let index = this.editList.findIndex(item => item.name == event.name);
		// },
		//确认到店
		orderAffirm(item) {
			console.log(item);
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.$http
				.post('wanlshop/reserve/toStore', {
					id: item.reserve.id
				})
				.then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						this.$refs.paging.reload();
						setTimeout(() => {
							this.$refs.uToast.show({
								type: 'default',
								message: '操作成功',
								duration: 1000
							});
						}, 150);
					}
				});
		},
		//已预定，可预定
		groupChange(event) {
			this.state = event;
			this.$refs.paging.reload();
		},
		//时间选择
		timeChange(event) {
			console.log(event);
			this.time = event.detail.value;
			this.$refs.paging.reload();
		},
		//包厢/桌号选择
		boxChange(event) {
			this.is_box = this.boxList[event.detail.value];
			this.$refs.paging.reload();
		},
		//人数
		numChange(event) {
			console.log(event, 'event');
			this.num = this.numList[event.detail.value];
			this.$refs.paging.reload();
		},
		queryList(pageNo, pageSize) {
			const date = new Date();
			let time = this.time
				? this.time + ' ' + this.times
				: date.getFullYear() +
				  '-' +
				  (date.getMonth() + 1) +
				  '-' +
				  date.getDate() +
				  ' ' +
				  this.times;
			this.$http
				.post('wanlshop/shop/roomList', {
					page: pageNo,
					limit: pageSize,
					shop_id: this.merchant.id,
					state: this.state ? this.state : [],
					time,
					num: this.num,
					is_box: this.is_box == '包厢' ? 0 : 1
				})
				.then(res => {
					console.log(res, 'res');

					res.code == 1 ? this.$refs.paging.complete(res.data) : this.$refs.paging.complete(false);
				});
		},
		timeChange(event) {
			this.timeShow = false;
			this.time = this.getTime(event.value);
			this.$refs.paging.reload();
		},
		getTime(date) {
			var date = new Date(date);
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			return Y + M + D + h + m;
		},
		getPer() {
			this.$http
				.post('wanlshop/reserve/reserveUserList', {
					shop_id: uni.getStorageSync('merchant').id
				})
				.then(res => {
					this.numList = res.data.lanmu.num;
					this.boxList = res.data.lanmu.type;
				});
		}
	}
};
</script>
<style>
page {
	background: #f8f9fd;
}
</style>
<style lang="scss" scoped>
.dateBox,
.numBox {
	display: flex;
	align-items: center;

	.num_item {
		background: #f8f8f8;
		border-radius: 39rpx;
		color: #656565;
		font-size: 30rpx;
		padding: 20rpx 40rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.num_active {
		background: #fff8e2 !important;
		color: #ff9f04 !important;
	}

	.disabled {
		background: #eeeeee !important;
		color: #979393 !important;
	}
}
.popup {
	padding: 20rpx;
	.btn {
		// display: grid;
		// grid-template-columns: repeat(2,1fr);
		// grid-column-gap: 20rpx;
		margin-top: 40rpx;
	}
	.date {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.num_item {
		background: #f8f8f8;
		border-radius: 39rpx;
		color: #656565;
		font-size: 30rpx;
		padding: 20rpx 40rpx;
		text-align: center;
	}
	.grid_3 {
		display: flex;
		align-items: center;
		.grid3_item {
			background: #f8f8f8;
			border-radius: 100rpx;
			color: #656565;
			font-size: 30rpx;
			padding: 10rpx 40rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
		}

		.grid_name,
		.grid_label {
			text-align: center;
			line-height: 42rpx;
		}
		.grid_active {
			background: #fff8e2 !important;
			color: #ff9f04 !important;
		}
	}
}
/deep/.u-action-sheet__item-wrap__item {
	padding: 40rpx 30rpx !important;
}

.between {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.top {
	// padding: 20rpx 24rpx;
	padding: 20rpx 0rpx;
	background: #fff;
	box-sizing: border-box;

	.status_box {
		background: rgba(248, 249, 253, 1);
		border-radius: 100rpx;
		padding: 20rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
}

.content {
	padding: 20rpx 24rpx;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 20rpx;
	grid-row-gap: 20rpx;

	.grid_item {
		background: #fff;
		border-radius: 20rpx;

		.item_title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 20rpx;

			.status_0,
			.status_1 {
				border-radius: 20rpx 0rpx 20rpx 0rpx;
				background: rgba(255, 203, 46, 1);
				padding: 10rpx 20rpx;
				color: #fff;
				font-weight: bold;
				font-size: 28upx;
			}
			.status_0 {
				background: #dbdbdb;
			}
		}

		.item_content {
			padding: 32rpx 10rpx;
			position: relative;

			.status_image {
				width: 38px;
				height: 38px;
				position: absolute;
				right: 10px;
				top: 60px;
			}

			.status1_image {
				width: 38px;
				height: 38px;
				position: absolute;
				right: 20px;
				top: 25px;
			}

			.item_box {
				width: 172rpx;
				height: 112rpx;
				display: block;
				margin: 0 auto 26rpx;
			}

			.item_lobby {
				width: 100rpx;
				height: 100rpx;
				display: block;
				margin: 0 auto 26rpx;
			}

			.item_name {
				display: flex;
				align-items: center;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				margin-bottom: 26rpx;
				justify-content: center;

				.name_left {
					color: rgba(255, 106, 0, 1);
					font-size: 32rpx;
					font-weight: bold;
					margin-right: 4rpx;
				}

				.name_right {
					color: rgba(59, 59, 59, 1);
					font-size: 28rpx;
				}
			}

			.item_text {
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 240rpx;
				height: 56rpx;
				margin: 0 auto 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0rpx 30rpx;
				box-sizing: border-box;
				background-image: url();
			}
		}
	}
}

::v-deep .u-checkbox {
	display: flex !important;
}
</style>
